<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getCfgDedListApi, postCfgDeductionApi } from '@/common/apis/attendance'
import type { DebitType } from '@/common/types/attendance-type'
import { message } from 'ant-design-vue';

// 储存扣款规则数据
const cfgDedListData = ref<DebitType[]>([])
// 定义映射表
const cfgDedListMap: { [key: number]: string } = {
    51000: '迟到扣款',
    52000: '早退扣款',
    53000: '旷工扣款',
}

const props = defineProps({
    closeModel: {
        type: Function,
        required: true
    },
    departmentId: {
        type: Number,
        required: true
    }
})

// 获取扣款规则数据
const getCfgDedListData = async () => {
    const res = await getCfgDedListApi({ departmentId: props.departmentId })
    cfgDedListData.value = res.data.data
    console.log(cfgDedListData.value, '获取扣款规则数据')
}

// 保存更新
const onsubmit = async () => {

    // 更新数据
    await postCfgDeductionApi(cfgDedListData.value).then(res => {
        message.success(res.data.message)
        props.closeModel();

    }).catch(err => {
        message.warning(err.response.data.message)
    })


}

// 切换开关状态
const toggleSwitch = (item: DebitType) => {
    item.isEnable = item.isEnable === 1 ? 0 : 1; // 切换 isEnable 的值
}

onMounted(() => {
    getCfgDedListData()
})
</script>

<template>
    <div>
        <!-- 循环前两个数据 -->
        <div v-for="item in cfgDedListData.slice(0, 2)" :key="item.id">
            <a-row class="space">
                <a-col :span="6" :offset="3">
                    <div>
                        {{ cfgDedListMap[Number(item.dedTypeCode)] }}
                        <a-switch :checked="item.isEnable === 1" @change="() => toggleSwitch(item)" />
                    </div>
                </a-col>
            </a-row>
            <a-row class="space">
                <a-col :span="8" :offset="5">
                    <div>迟到≤ <a-input class="space-input" v-model:value="item.periodLowerLimit" />分钟</div>
                </a-col>
            </a-row>
            <a-row class="space">
                <a-col :span="10" :offset="8">
                    <div>迟到≤ <a-input class="space-input" v-model:value="item.timesLowerLimit" />次，每次扣款<a-input
                            class="space-input" v-model:value="item.dedAmonutUpperLimit" />元</div>
                </a-col>
            </a-row>
            <a-row class="space">
                <a-col :span="10" :offset="8">
                    <div>迟到> <a-input class="space-input" :disabled="true"
                            v-model:value="item.timesUpperLimit" />次，每次扣款<a-input class="space-input"
                            v-model:value="item.dedAmonutLowerLimit" />元</div>
                </a-col>
            </a-row>
            <a-row class="space">
                <a-col :span="8" :offset="5">
                    <div>迟到> <a-input class="space-input" :disabled="true" v-model:value="item.periodUpperLimit" />分钟
                    </div>
                </a-col>
            </a-row>
            <a-row class="space">
                <a-col :span="10" :offset="8">
                    <div>迟到> <a-input class="space-input" :disabled="true"
                            v-model:value="item.isAbsenteeism" />次，每次矿工<a-input class="space-input"
                            v-model:value="item.absenceDays" />天</div>
                </a-col>
            </a-row>
            <a-divider />
        </div>

        <!-- 单独处理最后一个数据 -->
        <div v-if="cfgDedListData.length > 2">
            <a-row class="space">
                <a-col :span="6" :offset="3">
                    <div>
                        {{ cfgDedListMap[Number(cfgDedListData[2].dedTypeCode)] }}
                        <a-switch :checked="cfgDedListData[2].isEnable === 1"
                            @change="() => toggleSwitch(cfgDedListData[2])" />
                    </div>
                </a-col>
            </a-row>
            <a-row class="space">
                <a-col :span="8" :offset="5">
                    <div>旷工按<a-input class="space-input" v-model:value="cfgDedListData[2].fineSalaryMultiples" />倍工资处罚
                    </div>
                </a-col>
            </a-row>
            <a-divider />
        </div>

        <a-button @click="onsubmit" type="primary">保存更新</a-button>
    </div>
</template>

<style lang="scss" scoped>
.space {
    // 间距
    margin-bottom: 15px;

    &-input {
        width: 60px;
    }
}
</style>